<template>
	<div class="dataAnalysis">
		<div class="app_left" :style="{ width: isCollapse ? '64px' : '200px' }">
			<div class="fix_diban" :style="{ width: isCollapse ? '64px' : '200px' }"></div>
			<div class="size_change" :style="{ justifyContent: isCollapse ? 'center' : 'flex-end' }">
        <span
					class="anm_joker"
					:style="{ transform: isCollapse ? 'rotate(90deg)' : 'rotate(0deg)' }"
					@click="handleToggleCollapse"
				>
          <i :style="{ marginRight: isCollapse ? '0' : '20px' }" class="el-icon-s-unfold"></i>
        </span>
			</div>
			<div class="data-grid el-menu" :class="{'el-menu--collapse': isCollapse}"
					 @mouseleave="handleToggleDataGrid('mouseleave')"
					 @mouseenter="handleToggleDataGrid('mouseenter')">
				<div class="el-submenu" :class="{'is-opened': data_grid_open}">
					<div class="item-text el-submenu__title"
							 @click="handleToggleDataGrid('click')">
						<i class="el-icon-view"></i>
						<span>数据概览</span>
						<i class="el-submenu__icon-arrow el-icon-arrow-down"></i>
					</div>
					<data-grid-menu :isOpen="data_grid_open" :collapse="isCollapse" @select="handleEmitSelect"></data-grid-menu>
				</div>
			</div>
			<el-menu
				:default-active="$route.name"
				:default-openeds="openeds_menu"
				:collapse-transition="true"
				background-color="rgba(81, 90, 110, 1)"
				text-color="rgba(255, 255, 255, 0.8)"
				class="el-menu-vertical-demo left_menu"
				:collapse="isCollapse"
			>
				<template v-for="_i in menuList">
					<!-- 单级导航 -->
					<el-menu-item
						@click="router_change(_i)"
						:key="_i.key"
						:index="_i.name"
						v-if="!_i.children || _i.children.length == 0"
					>
						<i :class="_i.icon"></i>
						<span slot="title">{{ _i.txt }}</span>
					</el-menu-item>

					<!-- 具有子级的区域 -->
					<el-submenu :key="_i.key" :index="_i.name" v-if="_i.children && _i.children.length > 0">
						<template slot="title">
							<i :class="_i.icon"></i>
							<span>{{ _i.txt }}</span>
						</template>
						<el-menu-item-group>
							<el-menu-item
								@click="router_change(_is)"
								v-for="_is in _i.children"
								:key="_is.key"
								:index="_is.name"
							>
								<i :class="_is.icon"></i>
								<span class="sec_size" slot="title">{{ _is.txt }}</span>
							</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
				</template>
			</el-menu>
		</div>
		<div
			:style="{
        width: isCollapse ? 'calc(100% - 64px)' : 'calc(100% - 200px)'
      }"
			class="app_right"
		>
			<router-view class="router_view"></router-view>
		</div>
	</div>
</template>

<script>
	import DataGridMenu from "./dataGirdMenu";

	export default {
		name: "dataAnalysisIndex",
		watch: {
			menuList() {
			},
			$route: {
				handler(val) {
					console.log(val);
					let {path} = val;
					if (path.indexOf("dataCard") > -1) {
						this.data_grid_open = true;
					} else {
						this.data_grid_open = false;
					}
					console.log("data_grid_open", this.data_grid_open)
				},
				immediate: true
			}
		},
		data() {
			return {
				isCollapse: false,
				openeds_menu: [],
				data_grid_open: false
			};
		},
		computed: {
			menuList() {
				return this.$store.state.dataAnalysis.data_analysis_menuList;
			}
		},
		components: {
			DataGridMenu
		},
		methods: {
			// 页面导航函数
			router_change(obj) {
				if (!obj.path) {
					this.$message("模块异常，请联系管理员！！！");
					return;
				}
				this.$store.commit("active_menu_data_analysis_change", obj.name); //  更改数据分析模块下，当前激活的导航
				this.$router.push("/dataAnalysis/" + obj.path); //  跳转页面
			},
			handleToggleCollapse() {
				this.isCollapse = !this.isCollapse;
				if (!this.isCollapse) {
					let {path} = this.$route;
					if (path.indexOf("dataCard") > -1) {
						this.data_grid_open = true;
					}
				}
			},
			handleToggleDataGrid(type) {
				if (type === "click") {
					if (!this.isCollapse) {
						this.data_grid_open = !this.data_grid_open;
					}
				} else if (type === "mouseenter") {
					if (this.isCollapse) {
						this.data_grid_open = true;
					}
				} else if (type === "mouseleave") {
					if (this.isCollapse) {
						this.data_grid_open = false;
					}
				}
			},
			handleEmitSelect(val) {
				console.log(val);
				this.data_grid_open = true;
			}
		},
		created() {
			//  更改数据分析的当前激活项
			if (!this.$store.state.dataAnalysis.active_menu_data_analysis) {
				this.$store.commit("active_menu_data_analysis_change", this.$route.name);
			}
			// 设置默认展开的导航菜单
			let _arr = this.$store.state.dataAnalysis.data_analysis_menuList;
			let _show_arr = [];
			_arr.map((_i) => {
				_i.children.map(_is => {
					if (_is.name == this.$route.name) {
						_show_arr.push(_i.name)
					}
				})
			});
			this.openeds_menu = _show_arr
		},
		mounted() {
		}
	};
</script>

<style scoped lang="scss">
	.router_view {
		width: 100%;
		height: 100%;
	}

	// 旋转动画用的 过度类名
	.anm_joker {
		transition: all 0.5s ease;
	}

	.dataAnalysis::-webkit-scrollbar {
		display: none;
	}

	.dataAnalysis {
		box-sizing: border-box;
		position: fixed;
		left: 0;
		right: 0;
		top: 60px;
		height: auto;
		//   min-height: 92.6vh;
		background: rgba(238, 238, 238, 1);
		// height: 92.6vh;
		bottom: 0;
		overflow-y: scroll;

		.app_left {
			height: auto;
			display: inline-block;
			// min-height: calc(93vh - 4px);
			margin: 0;
			padding: 0;

			.left_menu {
			}

			.size_change {
				cursor: pointer;
				width: 100%;
				margin: 0 auto;
				height: 20px;
				background: rgba(81, 90, 110, 1);
				font-size: 16px;
				font-weight: 600;
				display: flex;
				align-items: center;
				text-indent: 10%;

				span {
				}

				i {
					font-size: 16px;
					color: rgba(255, 255, 255, 0.8);
				}
			}

			.data-grid {
				background: rgba(81, 90, 110, 1);
				position: relative;
				color: rgba(255, 255, 255, 0.8);

				& > .el-submenu {
					.el-submenu__title {
						height: 56px;
						line-height: 56px;
						font-size: 14px;
						color: rgba(255, 255, 255, 0.8);
						padding: 0 20px;
						list-style: none;
						cursor: pointer;
						position: relative;
						transition: border-color .3s, background-color .3s, color .3s;
						box-sizing: border-box;
						white-space: nowrap;

						&:hover {
							background-color: rgb(204, 204, 204);
						}
					}
				}
			}

			.el-menu {
				border-right: none;
				background: rgba(81, 90, 110, 1);

				li {
					.sec_size {
						font-size: 12px;
					}
				}

				li:hover {
					//   background: red !important;
					color: rgba(53, 62, 79, 1) !important;
				}

				.is-active {
					background: rgba(53, 62, 79, 1);
					color: #01b27a !important;
				}

				.el-menu-item {
					color: rgba(255, 255, 255, 0.8);
				}
			}

			.el-menu:hover {
				color: red !important;
			}

			background: rgba(53, 62, 79, 1);
			// border-right: 2px solid #f5f5f5;
			.fix_diban {
				position: fixed;
				left: 0;
				top: 120px;
				bottom: 0;
				background: rgba(53, 62, 79, 1);
				display: inline-block;
			}
		}

		.app_right {
			position: absolute;
			// width: calc(100% - 202px);
			top: 0;
			bottom: 0;
			right: 0;
			display: inline-block;
		}
	}
</style>
